<template>
  <!-- 海报(想让海报显示隐藏要用hidden，v-if关闭后没办法在完整的出来海报) 保存海报按钮和关闭按钮 在html代码中写出来 绑定点击方法然后透明 再用canvas 覆盖 -->
  <view class="canvas_box" :hidden="canvasFlag"></view>
</template>

<script>
export default {
  data() {
    return {}
  },
  props: {
    canvasFlag: {
      type: Boolean,
      default: true
    },
    posterObj: {
      type: Object,
      default: {
        url: "https://img0.zuipin.cn/mp_zuipin/poster/hch-pro.jpg", //商品主图
        icon: "https://img0.zuipin.cn/mp_zuipin/poster/hch-hyj.png", //会员价图标
        title: "诗酒茶系列 武夷大红袍 2018年 花香型中火 一级 体验装 16g", //标题
        discountPrice: "250.00", //折后价格
        orignPrice: "300.00", //原价
        code: "https://img0.zuipin.cn/mp_zuipin/poster/hch-code.png", //小程序码
        closeUrl: "https://img0.zuipin.cn/mp_zuipin/poster/close_btn.png" //关闭按钮
      }
    }
  },
  methods: {
    // 海报
    // 画圆角矩形 ctx、x起点、y起点、w宽度、h高度、r圆角半径、fillColor填充颜色、strokeColor边框颜色
    roundRect(ctx, x, y, w, h, r, fillColor, strokeColor, btn) {
      // 开始绘制
      ctx.beginPath()
      // 绘制左上角圆弧 Math.PI = 180度
      // 圆心x起点、圆心y起点、半径、以3点钟方向顺时针旋转后确认的起始弧度、以3点钟方向顺时针旋转后确认的终止弧度
      ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5)
      // 绘制border-top
      // 移动起点位置 x终点、y终点
      ctx.moveTo(x + r, y)
      // 画一条线 x终点、y终点
      ctx.lineTo(x + w - r, y)
      // 绘制右上角圆弧
      ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2)
      // 绘制border-right
      ctx.lineTo(x + w, y + h - r)
      // 绘制右下角圆弧

      ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5)

      // 绘制左下角圆弧

      ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI)

      // 绘制border-left
      ctx.lineTo(x, y + r)
      if (btn == "btn") {
        // const grd = ctx.createLinearGradient(0, 0, 200, 0) //渐变色
        // grd.addColorStop(0, fillColor)
        // grd.addColorStop(1, strokeColor)
        // // 因为边缘描边存在锯齿，最好指定使用 transparent 填充
        // ctx.setFillStyle(grd)
        // 对绘画区域填充
        ctx.fill()
      } else {
        if (fillColor) {
          // 因为边缘描边存在锯齿，最好指定使用 transparent 填充
          ctx.setFillStyle(fillColor)
          // 对绘画区域填充
          ctx.fill()
        }
        if (strokeColor) {
          // 因为边缘描边存在锯齿，最好指定使用 transparent 填充
          ctx.setStrokeStyle(strokeColor)
          // 画出当前路径的边框
          ctx.stroke()
        }
      }
      // 关闭一个路径
      ctx.closePath()
      // 剪切，剪切之后的绘画绘制剪切区域内进行，需要save与restore 这个很重要 不然没办法保存
      ctx.clip()
    },

    /**
     * canvas绘图相关，把文字转化成只能行数，多余显示省略号
     * ctx: 当前的canvas
     * text: 文本
     * contentWidth: 文本最大宽度
     * lineNumber: 显示几行
     */
    canvasMultiLineText(ctx, text, contentWidth, lineNumber) {
      var textArray = text.split("") // 分割成字符串数组
      var temp = ""
      var row = []
      for (let i = 0; i < textArray.length; i++) {
        if (ctx.measureText(temp).width < contentWidth) {
          temp += textArray[i]
        } else {
          i-- // 这里添加i--是为了防止字符丢失
          row.push(temp)
          temp = ""
        }
      }
      row.push(temp)

      // 如果数组长度大于2，则截取前两个
      if (row.length > lineNumber) {
        var rowCut = row.slice(0, lineNumber)
        var rowPart = rowCut[1]
        var test = ""
        var empty = []
        for (var a = 0; a < rowPart.length; a++) {
          if (ctx.measureText(test).width < contentWidth) {
            test += rowPart[a]
          } else {
            break
          }
        }
        empty.push(test) // 处理后面加省略号
        var group = empty[0] + "..."
        rowCut.splice(lineNumber - 1, 1, group)
        row = rowCut
      }
      return row
    },
    // 获取海报的小程序码
    codeImg() {
      return new Promise((resolve, reject) => {
        request({
          method: "get",
          url: "/spSupport/getwxacodeunlimit",
          header: { "Content-Type": "application/x-www-form-urlencoded" },
          data: {
            version: this.$parent.globalData.version,
            scene: `sku=${this.sku}`,
            page: "pages/product/detail",
            width: "128px"
          }
        })
          .then(res => {
            if (res.data.code == 0) {
              const fsm = wx.getFileSystemManager()
              const FILE_BASE_NAME = "tmp_img_src"
              let filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.jpg`
              fsm.writeFile({
                filePath,
                data: res.data.data,
                encoding: "binary",
                success() {
                  resolve(filePath)
                },
                fail() {
                  this.canvasFlag = true
                  uni.showToast({
                    title: "海报生成失败",
                    duration: 2000,
                    icon: "none"
                  })
                }
              })
            } else {
              uni.showToast({
                title: res.data.message,
                icon: "none",
                duration: 2000,
                icon: "none"
              })
            }
          })
          .catch(() => {
            this.canvasFlag = true
            uni.showToast({
              title: "海报生成失败",
              duration: 2000,
              icon: "none"
            })
          })
      })
    },

    // 生成海报
    createCanvasImage() {
      console.log(this.posterObj, "posterObj")
      console.log("海报生成中")
      wx.showLoading({
        title: "海报生成中..."
      })
      let _this = this
      let phoneData = wx.getSystemInfoSync()
      this.phoneH = phoneData.windowHeight-83
      this.phoneW = phoneData.windowWidth
      let scaleW = this.phoneW / 375 //按照苹果留 375*667比例 其他型号手机等比例缩放 显示
      let scaleH = this.phoneH / 667 //按照苹果留 375*667比例 其他型号手机等比例缩放 显示
      console.log(this.phoneH, this.phoneW)
      const ctx = wx.createCanvasContext("myCanvas")
      let url = this.posterObj.url //商品主图
      let zpPriceIcon = this.posterObj.icon //图标
      let code = this.posterObj.code
      let closeBtn = this.posterObj.closeUrl
      ctx.draw() //清空原来的画图内容
      ctx.save()
      this.roundRect(
        ctx,
        50,
        40,
        this.phoneW,
        this.phoneH-83,
        0,
        "#fff",
        "#fff"
      ) //绘制海报圆角背景白色的
      ctx.restore() //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 可以继续绘制
      ctx.save()
      ctx.restore()
      //将网络图片转成本地路径 商品图片
      wx.getImageInfo({
        src: url,
        success(res) {
          ctx.save()

          ctx.drawImage(
            res.path,
            (_this.phoneW - (_this.phoneW - 30)) / 2,
            55,
            _this.phoneW - 30,
            _this.phoneH - 167,
            10
          ) //绘制图
          ctx.restore() //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 可以继续绘制
          ctx.draw(true)
        },
        fail() {
          _this.canvasFlag = true
          uni.showToast({ title: "海报生成失败", duration: 2000, icon: "none" })
        }
      })
      // 海报商品title
      setTimeout(() => {
        ctx.setGlobalAlpha(1) //不透明
        ctx.setFillStyle("#333232") //文字颜色：默认黑色
        ctx.setFontSize(14) //设置字体大小，默认10
        ctx.font = "normal bold 14px sans-serif"
        let text = this.posterObj.title
        let row = this.canvasMultiLineText(ctx, text, this.phoneW - 130, 2) //计算绘制的2行文本
        let contentTextY = 830 // 这段文字起始的y位置
        let leftSpace = 30 // 这段文字起始的X位置
        let textLineHeight = 18 // 一行文字加一行行间距
        for (let b = 0; b < row.length; b++) {
          //一行一行绘制文本
          ctx.fillText(
            row[b],
            leftSpace,
            (contentTextY + textLineHeight * b - 15) * scaleH,
            this.phoneW - 130
          )
          ctx.draw(true)
        }
      }, 500)
      // 海报商品title end
      // 会员价 图标
      wx.getImageInfo({
        src: zpPriceIcon,
        success(res) {
          ctx.drawImage(res.path, 65, 380 * scaleH, 44, 15)
          ctx.draw(true)
        },
        fail() {
          _this.canvasFlag = true
          uni.showToast({ title: "海报生成失败", duration: 2000, icon: "none" })
        }
      })
      // 会员价 图标 end
      //绘制价格
      ctx.setFontSize(12) //设置字体大小，默认10
      ctx.setFillStyle("#6E609E") //文字颜色：默认黑色
      ctx.font = "normal 12px sans-serif"
      ctx.fillText("￥", 110, 396 * scaleH, 60)
      ctx.setFontSize(16) //设置字体大小，默认10
      let zpPrice = this.posterObj.discountPrice //会员价格
      let orignPrice = this.posterObj.orignPrice //市场价

      let zpPriceW = ctx.measureText(zpPrice).width //文本的宽度
      ctx.fillText(zpPrice, 120, 396 * scaleH, zpPriceW)

      ctx.beginPath() //开始一个新的路径
      ctx.setFontSize(10) //设置字体大小，默认10
      ctx.setFillStyle("#999") //文字颜色：默认黑色
      let orignPriceW = ctx.measureText(orignPrice).width //去掉市场价
      ctx.fillText(
        `￥${orignPrice}`,
        120 + zpPriceW + 5,
        395 * scaleH,
        orignPriceW
      ) //5价格间距
      ctx.moveTo(120 + zpPriceW + 5, 392 * scaleH) //设置线条的起始路径坐标
      ctx.lineTo(120 + zpPriceW + 5 + orignPriceW, 392 * scaleH) //设置线条的终点路径坐标
      ctx.setStrokeStyle("#999")
      ctx.stroke() //对当前路径进行描边
      ctx.closePath() //关闭当前路径
      //绘制价格 end
      // this.codeImg().then((res)=>{
      // 小程序码
      wx.getImageInfo({
        src: code,
        success(res) {
          ctx.drawImage(res.path, (_this.phoneW - 70) / 2, 430 * scaleH, 70, 70)
          ctx.draw(true)
        },
        fail() {
          _this.canvasFlag = true
          uni.showToast({ title: "海报生成失败", duration: 2000, icon: "none" })
        }
      })
      // });

      // 小程序码end
      // // 小程序的名称
      // ctx.setFontSize(14)
      // ctx.setFillStyle("#2f1709") //文字颜色：默认黑色
      // ctx.font = "normal bold 14px sans-serif"
      // ctx.fillText("小程序的名称", (_this.phoneW - 90) / 2, 530 * scaleH, 90)
      // 小程序的名称end
      // 长按/扫描识别查看商品
      ctx.setFontSize(10)
      ctx.setFillStyle("#333333") //文字颜色：默认黑色
      ctx.fillText(
        "长按识别二维码",
        _this.phoneW - 30,
        650 * scaleH,
        140
      )
      // 长按/扫描识别查看商品end
      
      wx.hideLoading()
    },

   
	// 取消海报
    canvasCancelEvn() {
      this.$emit("cancel", true)
    }
  }
}
</script>

<style lang="scss">
.content {
  text-align: center;
  height: 100%;
}
.canvas_box {
  .canvas_box_mask {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9;
  }
  .canvas {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 9;
  }
  .button-wrapper {
    width: 320rpx;
    height: 72rpx;
    position: absolute;
    bottom: 20rpx;
    left: 215rpx;
    z-index: 16;
  }

  .save_btn {
    font-size: 30rpx;
    line-height: 72rpx;
    color: #fff;
    width: 100%;
    height: 100%;
    text-align: center;
    border-radius: 45rpx;
    border-radius: 36rpx;
    z-index: 10;
  }
  .canvas_close_btn {
    position: fixed;
    top: 30rpx;
    right: 0;
    z-index: 12;
  }
}
</style>
